<template>
	<view class="page-container">
		<scroll-view class="tabs-container" scroll-y :style="'height:' + clentHeight + 'px'">
			<view class="addressList_value">
				<uv-cell :border="false" isLink @click="toSelectAddress" v-if="show">
					<view class="addressList_container" slot="title">
						<!-- <view class="addressList_add">{{address.area1}} > {{ address.area2 }} > {{ address.area3 }}
						</view> -->
						<view class="addressList_info">
							<text class="info_name">{{ address.name }}</text>
							<text class="info_mobile">{{ address.mobile }}</text>
						</view>
					</view>
				</uv-cell>
				<uv-cell :border="false" isLink @click="toAddAddress" v-else>
					<view slot="title">填写收货地址</view>
				</uv-cell>
			</view>

			<view class="order-select">
				<uv-radio-group v-model="radiovalue">
					<uv-radio name="自提" :customStyle="{flex: '1',marginRight: '6px'}">
						<view class="order-box" :class="{active:radiovalue=='自提'}">自提</view>
					</uv-radio>
					<uv-radio name="外送" :customStyle="{flex: '1',marginLeft:'6px'}">
						<view class="order-box" :class="{active:radiovalue =='外送'}">外送</view>
					</uv-radio>
				</uv-radio-group>
			</view>

			<view class="order-address" v-if="radiovalue =='外送'">
				<view class="addressList_add">送货地址：{{address.area1}} > {{ address.area2 }} > {{ address.area3 }}</view>
			</view>

			<view class="goods_card">
				<view class="select-content">
					<view v-for="item in selectedGoodsList" id="item.id" :key="item.id" class="goodCard-select">
						<view class="select_head">
							<view class="select_title">{{item.date}}{{item.mealType}}</view>
							<view class="select_time" v-if="item.time !='' ">送餐时间：{{item.time}}</view>
						</view>
						<view v-for="item in item.products" :key="item.id" class="select_box">
							<view class="pic">
								<uv-image width="64rpx" height="64rpx" :src="item.image" radius="4" />
							</view>
							<view class="select-info">
								<view class="info">
									<view class="title">{{ item.name }}</view>
								</view>
								<view class="status">
									<view class="price_n">
										<text class="price_i">￥</text>
										<text>{{ item.price }}</text>
									</view>
									<view class="status-value">x{{item.count}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="total_card">
				共{{selectedAllRowLength}}件，合计￥{{sumPrice}}
			</view>

			<view class="order_textarea">
				<uv-textarea v-model="textarea" placeholder="如有特殊需求请备注说明"></uv-textarea>
			</view>

		</scroll-view>

		<view class="order-tabbar">
			<view class="order-content">
				<view class="red-price">应付：￥{{sumPrice}}</view>
				<view class="order-button" @click="submit">提交订单</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	export default {
		data() {
			return {
				clentHeight: 0, // 内容块的高度
				address: null,
				hospital: '',
				show: false,
				orderCode: '3237147974625021113',
				createTime: '2023-03-04 20:10:14',
				payTime: '2023-03-04 20:10:22',
				deliveryTime: '2023-03-05 12:52:30',
				transactionTime: '2023-03-15 12:52:35',
				textarea: '',
				payment: '微信支付',
				paymentList: [{
					value: '微信支付',
					disabled: false,
					name: '/static/images/weixin.png',
				}, ],
				goodList: '',
				radiovalue: ''
			};
		},
		onShow(options) {
			var value = uni.getStorageSync('address');
			var hhh = uni.getStorageSync('hospital')
			this.address = value;
			this.hospital = hhh;
			console.log(value, this.show);
			console.log(this.hospital)

			if (this.address) {
				this.show = true
			} else {
				this.show = false
			}
		},
		watch: {
			address: {
				handler(newVal) {
					if (typeof newVal === "string" && newVal.trim() !== "") {
						try {
							this.address = JSON.parse(newVal); // 解析 JSON 字符串
						} catch (error) {
							console.error("JSON 解析失败：", error);
							this.address = null; // 解析失败时重置 address
						}
					}
				},
				immediate: true, // 组件加载时立即执行
			},
		},

		onReady() {
			this.getClientHeight();
			// 初步渲染完后执行
			setTimeout(() => {
				uni.getSystemInfo({
					success: res => {
						// 可视区域高度
						console.log('总高度', res.windowHeight);
						this.clentHeight = res.windowHeight - this.getClientHeight() - 16;
						console.log('滚动高度', this.clentHeight);
					}
				});
			})
		},
		computed: {
			...mapGetters(["selectedGoodsList", "sumPrice", "selectedAllRowLength", "addressList"])
		},
		methods: {
			// 获取可视区域高度【兼容】
			getClientHeight() {
				const res = uni.getSystemInfoSync();
				console.log(res);
				const system = res.platform;
				if (system === 'ios') {
					return 44 + res.statusBarHeight;
				} else if (system === 'android') {
					return 48 + res.statusBarHeight;
				} else {
					return 0;
				}
			},
			toSelectAddress() {
				uni.navigateTo({
					url: '/pages/takeaway/addressList'
				});
			},
			toAddAddress() {
				uni.navigateTo({
					url: '/pages/takeaway/addAddress'
				});
			},
			submit() {
				const order2 = this.selectedGoodsList.map(item => {
					// 为每个订单项生成一个独立的随机数
					const randomNumber = Math.floor(Math.random() * 1000000).toString();

					return {
						...item,
						address: this.address, // 为每个订单项添加 address 信息
						orderID: randomNumber, // 为每个订单项生成独立的随机订单号
						orderStatus: 0,
					};
				});
				console.log('order2', order2)
				this.$store.dispatch('updateOrderList', order2);
				const encodedOrder = encodeURIComponent(JSON.stringify(order2));

				uni.navigateTo({
					url: `/pages/payment/payment?order=${encodedOrder}`
				});
			}
		}
	}
</script>

<style lang="scss">
	@mixin multi-ellipsis($lines) {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: $lines;
		-webkit-box-orient: vertical;
	}

	.page-container {
		position: relative;
		background-color: #f6f6f6;

		.addressList_value {
			background-color: #ffffff;
			margin-bottom: 24rpx;
			overflow: hidden;
			position: relative;
			padding: 24rpx 0;

			&:before {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				height: 2px;
				background: repeating-linear-gradient(-45deg, #1989fa 0, #1989fa 20%, transparent 0, transparent 25%, #ff976a 0, #ff976a 45%, transparent 0, transparent 50%);
				background-size: 80px;
				content: '';
			}

			.addressList_container {

				.addressList_info {
					width: 100%;
					height: 60rpx;
					overflow: hidden;
					position: relative;
					display: flex;
					align-items: center;

					.info_name {
						font-size: 28rpx;
						color: #333333;
						font-weight: 500;
						padding-right: 18rpx;
					}

					.info_mobile {
						font-size: 28rpx;
						color: #9e9e9e;
						font-weight: 400;
					}
				}
			}

			.addressList_add {
				font-size: 28rpx;
				color: #333333;
				font-weight: 500;
			}
		}

		.order-select {
			display: flex;
			padding: 40rpx 24rpx;
			gap: 40rpx;
			background-color: #ffffff;

			.order-box {
				flex: 1;
				border: 1px solid #e5e5e5;
				padding: 40rpx;
				text-align: center;
				border-radius: 12rpx;

				&.active {
					background-color: #0c6fed;
					color: #ffffff;
				}
			}

			::v-deep .uv-radio__icon-wrap {
				display: none;
			}
		}

		.order-address {
			padding: 24px 24px;
			background-color: #ffffff;
			border-bottom: 1px solid #f1f1f1;
		}

		.goods_card {
			width: auto;
			height: auto;
			overflow: hidden;
			background-color: #ffffff;
			padding: 24rpx 0;

			.stylist {
				.box-title {
					display: flex;
					align-items: center;
					overflow: hidden;
					padding: 0 15px;

					.item-title {
						flex: 1;
						font-size: 28rpx;
						display: flex;
						align-items: center;

						.icon-title {
							width: 30rpx;
							float: left;
							padding-right: 12rpx;
						}

						.order-title {
							float: left;
							font-size: 30rpx;
							font-weight: 500;
							color: #333333;
						}
					}
				}
			}

			.select-content {
				margin: 0 15px;
				width: calc(100% - 30px);
				padding-top: 24rpx;

				.goodCard-select {
					position: relative;
					margin-bottom: 40rpx;

					.select_head {
						display: flex;
						font-size: 26rpx;
						align-items: center;
						margin-bottom: 40rpx;
						border-bottom: 1px solid #e6f1ff;

						.select_title {
							background-color: #e6f1ff;
							padding: 4px 12px;
							width: 120px;
							border-radius: 5px 10px 0 0;
						}

						.select_time {
							flex: 1;
							text-align: right;
							font-size: 24rpx;
						}
					}

					.select_box {
						display: flex;
						margin-bottom: 24rpx;

						&:last-child {
							margin-bottom: 0rpx;
						}

						.pic {
							width: 64rpx;
							height: 64rpx;
							overflow: hidden;
						}

						.select-info {
							flex: 1;
							padding: 0 0 0 20rpx;

							.info {
								flex: 2;
								align-items: center;
								overflow: hidden;

								.title {
									@include multi-ellipsis(2);
									font-size: 28rpx;
									color: #333333;
									height: auto;
									font-weight: 500;
								}
							}
						}
					}

					.status {
						display: flex;
						align-items: center;
						margin-top: 12rpx;
						font-size: 28rpx;

						.price_n {
							font-weight: 500;
							color: #FF9228;
							flex: 1;

							.price_i {
								font-size: 20rpx;
								font-weight: 500;
								color: #FF9228;
							}
						}

						.status-value {
							margin-right: 24rpx;

							.minus {
								display: block;
							}

							.input {
								width: 100rpx;
								text-align: center;
								font-size: 34rpx;
								height: 50rpx;
								line-height: 50rpx;
							}

							.plus {
								display: block;
							}
						}
					}
				}

				.list-select {
					display: inline-block;
					margin-right: 20rpx;
					width: 180rpx;
					position: relative;

					&:last-child {
						margin-right: 0px;
					}

					.pic {
						width: 180rpx;
						height: 180rpx;
						overflow: hidden;
					}

					.order-price {
						font-size: 26rpx;
						color: #333;
						padding-top: 12rpx;
					}
				}
			}
		}

		.order_textarea {
			padding: 24rpx;
		}

		.total_card {
			background-color: #ffffff;
			padding: 24rpx 30rpx;
			border-top: 1rpx solid #ededed;
			text-align: right;
			font-size: 28rpx;
		}

		.order-tabbar {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 100%;
			position: fixed;
			height: 64px;
			bottom: calc(var(--window-bottom));
			z-index: 99;
			background-color: #ffffff;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			&:after {
				content: '';
				position: absolute;
				width: 100%;
				height: 1rpx;
				z-index: 0;
				top: 0;
				left: 0;
				right: 0;
				margin: auto;
				background-color: #d6d7d9;
			}

			.order-content {
				padding: 12rpx 32rpx;
				width: 100%;
				display: flex;
				justify-content: flex-end;

				.red-price {
					flex: 1;
					color: #ff7900;
					line-height: 64rpx;
				}

				.order-button {
					flex: 1;
					position: fixed;
					background: linear-gradient(180deg, #418ec7, #0b6eef);
					color: #ffffff;
					padding: 16rpx 36rpx;
					border-radius: 50rpx;
					font-size: 28rpx;
				}

				::v-deep .u-button {
					/* 修改宽高 */
					height: 64rpx;
					width: 180rpx;
				}
			}
		}
	}
</style>